$(function () {
  // 点击选择图片按钮
  $('#btnChooseImg').on('click', function () {
    // 模拟点击行为
    $('#file').click()
  })

  // 监听file的change事件
  let file = null;
  $('#file').on('change', function (e) {
    // console.log(e.target.files)
    // 获取到用户选择的文件列表(伪数组)
    const files = e.target.files
    // 判断用户是否选择了文件
    if (files.length === 0) {
      file = null
      return
    }  
    file = files[0]
    // 如果用户选择了图片,则把图片渲染到页面的img标签中
    // URL.createObjectURL()函数接收一个文件,返回值是这个文件的URL地址
    const imgURL = URL.createObjectURL(files[0])
    // console.log(imgURL);
    $('#image').attr('src',imgURL)
  })


  // 点击上传头像的按钮
  $('#btnUploadImg').on('click', function () {
    console.log(file);
    if (file === null) {
      layer.msg('请先选择要上传的头像')
      return
    }
    // 1.把用户选择的头像转换为base64格式
    // 2.调用axios发起请求,上传头像
    // 3.如果头像上传成功了,则应该更新父页面(index)中用户的头像

    const fr = new FileReader()

    // fr.readAsDataURL(要读取的文件)
    fr.readAsDataURL(file)
    // 监听文件读取完成的load事件
    fr.addEventListener('load', function () {
      // 获取到读取的结果
      // console.log(fr.result);
      // 1.发起请求上传头像
      // 2.如果上传成功了,则提示用户
      // 3.需要更新页面中的基本信息
      axios.patch('/my/update/avatar', {
        avatar: fr.result
      }).then(({ data: res }) => {
        console.log(res);
        if (res.code == 0) {
          layer.msg('头像更新成功',{icon:6})
          window.parent.init()
        }
      })

    })
  })
})